<template>
    <div class="tags">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item , index) in bread" :key="index">{{item.title}}</el-breadcrumb-item>
        </el-breadcrumb>


    </div>
</template>

<script>
    import bus from './bus';
    export default {
        data() {
            return {
                tagsList: [],
                currentRoute: ''
            }
        },
        methods: {
            setTags(route){
                const isExist = this.tagsList.some(item => {
                    return item.path === route.fullPath;
                })
                !isExist && this.tagsList.push({
                    title: route.meta.title,
                    path: route.fullPath,
                    name: route.matched[1].components.default.name
                })
            }
        },
        computed: {
            bread() {
                return this.$store.state.common.breadcrumbArr
            }
        },
        watch:{
            $route(newValue, oldValue){
                this.setTags(newValue);
            }
        },
        created(){
            //刷新处理
        }
    }

</script>


<style lang="scss" scoped>
    .tags {
        position: relative;
        top: -20px;
        left: -20px;
        width: calc(100% + 40px);
        min-width: 1015px !important;
        height: 50px;
        overflow: hidden;
        background: #fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid #d8d8d8;
        display: flex;
        align-items: center;
        max-width: calc(100% + 50px);
        padding-left: 20px;
        > div {
            margin: 0 auto;
            min-width: 1680px;
        }
    }

    .tags ul {
        box-sizing: border-box;
        padding-right: 30px;
        width: 100%;
        height: 100%;
    }

    .tags-li {
        float: left;
        position:relative;
        font-size: 13px;
        overflow: hidden;
        cursor: pointer;
        max-width: 130px;
        height: 30px;
        line-height: 30px;
        background: #f1f1f1;
        border: 1px solid #d8d8d8;
        padding: 0 5px;
        vertical-align: middle;
        color: #666666;
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        transition: all .3s ease-in;
        text-align: center;
        box-sizing: border-box;
    }
    .tags-li-icon{
        position: absolute;
        right: 5px;
    }

    .tags-li:not(.active):hover .tags-li-title{
        color: #000;
    }

    .tags-li.active {
        background: #ffffff;
    }
    .tags-li.active .tags-li-title {
        color: #409eff;
    }

    .tags-li-title {
        display: inline-block;
        width: 75%;
        max-width: 80px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 5px;
        color: #666;
    }



    .tags-close-box {
        position: absolute;
        right: 0;
        top: 0;
        box-sizing: border-box;
        padding-top: 1px;
        text-align: center;
        width: 30px;
        height: 40px;
        border-left: 1px solid #d8d8d8;
        z-index: 10;
    }

    .el-dropdown{
        width: 100%;
        height: 40px;

    }
    .el-icon-arrow-down{
        width: 100%;
        height: 30px;
        line-height: 30px;
    }
</style>
